<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="../../codebase/skins/touch.css" type="text/css" media="screen" charset="utf-8">
	<script src="../../codebase/webix.js" type="text/javascript" charset="utf-8"></script>

	<title>Touch skin</title>
	<script type="text/javascript" src="../common/testdata.js"></script>
	<script type="text/javascript" src="../common/treedata.js"></script>
	<style>
		.transparent{
			background-color: transparent;
		}
		.main_title{
			/*font-size: 19px;*/

		}

		a.check_flight{
			color:  #367ddc;
		}
		.webix_row_select a.check_flight{
			color:  #fff;
		}
		.topbar.webix_toolbar {
			background: #2a5eb3;
		}

	</style>
</head>
<body>
<div style="margin:50px" id="containerDiv"></div>
<script type="text/javascript">

var cities = [
	{id:1, value:"Berlin"}, {id:2, value:"Kiev"}, {id:3, value:"Minsk"},
	{id:4, value:"Moscow"}, {id:5, value:"Prague"}, {id:6, value:"Riga"},
	{id:7, value:"St.Petersburg"}, {id:8, value:"Tallin"}, {id:9, value:"Vilnius"},{id:10, value:"Warsaw"}
];




var info = [
	{id:1, from:"Tallin", to: "Berlin", depart: "06:20", arrive: "08:35", status: "Landed"},
	{id:2, from:"Moscow", to: "Kiev", depart: "06:35", arrive: "07:40", status: "Landed"},
	{id:3, from:"Riga", to: "Warsaw", depart: "06:45", arrive: "08:05", status: "Landed"},
	{id:4, from:"Vilnius", to: "Zhulhany", depart: "06:50", arrive: "07:40", status: "Landed"},
	{id:5, from:"Prague", to: "St. Petersburg", depart: "07:20", arrive: "09:50", status: "On Time"},
	{id:6, from:"Moscow", to: "Prague", depart: "07:45", arrive: "10:05", status: "On Time"},
	{id:7, from:"Berlin", to: "Oslo", depart: "07:15", arrive: "09:45", status: "On Time"},
	{id:8, from:"Roma", to: "Stockholm", depart: "07:05", arrive: "10:25", status: "On Time"},
	{id:9, from:"Barcelona", to: "Kiev", depart: "07:10", arrive: "10:45", status: "On Time"},
	{id:10, from:"Milan", to: "Frankfurt", depart: "07:30", arrive: "09:15", status: "On Time"},
	{id:11, from:"Moscow", to: "Oslo", depart: "07:50", arrive: "10:50", status: "On Time"},
	{id:12, from:"Berlin", to: "Riga", depart: "08:05", arrive: "09:45", status: "On Time"},
	{id:13, from:"Roma", to: "Moscow", depart: "08:15", arrive: "11:25", status: "On Time"},
	{id:14, from:"Barcelona", to: "Vilnius", depart: "08:20", arrive: "11:45", status: "On Time"},
	{id:15, from:"Milan", to: "Warsaw", depart: "08:25", arrive: "10:15", status: "On Time"}
];



var flights = {
	id: "flight",
	rows:[
		{
		view: "form",

				elementsConfig:{
					labelWidth: 85
				},

				rows:[
					{ view:"text",  label: "Flight No.", placeholder: "Enter flight No."},

					{ view:"combo",label:"From", suggest:"cities", placeholder:"Select departure point"},

					{view:"combo", label:"To",  suggest:"cities", placeholder:"Select destination"},


					{inputWidth: 150,view:"button", type:"form", value:"Search", align: "center"}
				]



	},
	{

		view: "datatable", select:true,
		columns:[
			{id:"from", header:"From", width:120, sort:"string"},
			{id:"to", header:"To", width:120, sort:"string"},
			{id:"depart", header:"Depart", width:80, sort:"string"},
			{id:"arrive", header:"Arrive", width:80, sort:"string"},
			{id:"status", header:"Status", fillspace: true, sort:"string"}
		],
		data:info
	}
	]
};

var hotels = {};
var cars = {};
var ui = {

	width: 320,
	container: "containerDiv",
	height: 550,
	//type: "wide",
		rows:[
			{
				view:"toolbar",
				css: "topbar",


				elements:[
					{view:"icon",width: 40, icon:"bars"},
					{view:"label",  template: "<span class='main_title'>Webix Airlines Manager</span>"},{}

				]},
				{
					cells: [
						flights,
						hotels,
						cars
					]
				},
				{view: "tabbar", type: "iconTop", multiview: true, value: "flight", options:[
					{id: "flight", value: "Flights", icon: "plane"},
					{id: "hotels", value: "Hotels", icon: "home"},
					{id: "cars", value: "Cars", icon: "car"}
				]}

		]


};


webix.ready(function(){
	webix.ui({
		id: "cities",
		view: "suggest",
		body:{
			view: "list",
			yCount: 5,
			scroll: true,
			data: cities
		}

	});
	webix.ui(ui);



});

</script>
</body>
</html>